<template name="addvideo">
    {{#if equals addVideoStep 'addvideoform'}}
        {{> addvideoform}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformp2p'}}
        {{> addvideoformp2p}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformp2pbtfs'}}
        {{> addvideoformp2pbtfs}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformp2pipfs'}}
        {{> addvideoformp2pipfs}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformp2psia'}}
        {{> addvideoformp2psia}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformp2ptorrent'}}
        {{> addvideoformp2ptorrent}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoform3p'}}
        {{> addvideoform3p}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformfile'}}
        {{> addvideoformfile}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformfileuploading'}}
        {{> addvideoformfileuploading}}
    {{/if}}
    {{#if equals addVideoStep 'addvideoformfileuploaded'}}
        {{> addvideoformfileuploaded}}
    {{/if}}
    {{#if equals addVideoStep 'addvideopublish'}}
        {{> publish}}
    {{/if}}
    {{#if equals addVideoStep 'addsubtitle'}}
        {{> addsubtitle}}
    {{/if}}
</template>

<template name="addvideobuttonback">
    <div id="addvideoback" class="ui right floated labeled small button" tabindex="0">
        <button name="button" class="ui blue left labeled dtube icon button">
            <i class="arrow left icon blue" style="background:white;opacity:1;"></i>
            <div style="display:inline-block;padding: 0.8em 1em;">Back</div>
        </button>
    </div>
</template>

<template name="addvideobuttonnext">
    <div id="addvideonext" class="ui right floated labeled small button" tabindex="0">
        <button name="button" class="ui blue right labeled dtube icon button">
            <i class="arrow right icon blue" style="background:white;opacity:1;"></i>
            <div style="display:inline-block;padding: 0.8em 1em;">Next</div>
        </button>
    </div>
</template>

<template name="addvideobuttonfinish">
    <div id="addvideofinish" class="ui right floated labeled small button" tabindex="0">
        <button name="button" class="ui red right labeled dtube icon button">
            <i class="arrow right icon red" style="background:white;opacity:1;"></i>
            <div style="display:inline-block;padding: 0.8em 1em;">Finish</div>
        </button>
    </div>
</template>

<template name="addvideoform">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video</h1>
            <p>
                DTube enables you to share your video in a variety of ways, leaving no one out. Depending on your channel content, you should choose your video sources accordingly.
                <br /><br />
                {{> badgenew}} You can now combine multiple sources into the same DTube video.
                <h2>Choose a source: </h2>
            </p>
            <div class="grouped fields">
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="uploadtype" value="p2p">
                        <label>Peer-to-peer - Best for <strong>resilience</strong> and <strong>anonymity</strong></label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="uploadtype" value="3p">
                        <label>Third party - Best for <strong>speed</strong> and <strong>high-def</strong></label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="uploadtype" value="file">
                        <label>File Upload - Best for <strong>simplicity</strong> and <strong>small files</strong></label>
                    </div>
                </div>
            </div>
            {{> addvideobuttonnext}}
            {{#if existsFiles}}
                {{> addvideobuttonback}}
            {{/if}}
        </div>
    </div>
</template>

<template name="addvideoformp2p">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video with peer-to-peer</h1>
            <p>
                Great choice! Using peer-to-peer to share your video content is the best way to achieve freedom for your channel, while ensuring anyone can watch from anywhere.
                <br /><br />This method requires you to convert your video files to a web compatible format before sharing. To do so, we recommend using <a href="https://handbrake.fr"><strong>HandBrake</strong></a>, as it is free, open-source, and available for Windows, Mac and Linux.
                <h2>Choose a peer-to-peer protocol: </h2>
            </p>
            <div class="grouped fields">
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="uploadtypep2p" value="btfs">
                        <label>BTFS {{> badgenew}}</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="uploadtypep2p" value="sia">
                        <label>Skynet {{> badgenew}}</label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="uploadtypep2p" value="ipfs">
                        <label>IPFS</label>
                    </div>
                </div>
                <!-- <div class="field">
                    <div class="ui radio checkbox">
                        <input type="radio" name="uploadtypep2p" value="torrent">
                        <label>WebTorrent</label>
                    </div>
                </div> -->
            </div>
            
            {{> addvideobuttonnext}}
            {{> addvideobuttonback}}
        </div>
    </div>
</template>

<template name="addvideoformp2pbtfs">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video with BTFS</h1>
            <p>
                    <a href="https://www.bittorrent.com/btfs/"><strong>BTFS</strong></a> is similar to IPFS in the way it works technically for file sharing, but BTFS is tokenized and becomes a marketplace for file storage.
                    <br /><br />By running a BTFS Host and seeding DTube videos, you can earn <a target="_blank" href="https://www.bittorrent.com/btt/"><strong>BTT</strong></a>. Or you can spend BTT to host your videos on <a target="_blank" href="https://btfssoter.readme.io/docs/getting-started"><strong>BTFS Soter</strong></a>
                    <br /><br />However, BTFS is currently a smaller ecosystem than IPFS, but growing fast. BTFS protocol is strongly recommended if you care about crypto-currency rewards.
            </p>

            {{> addvideohashes}}
            
            {{> addvideobuttonfinish}}
            {{> addvideobuttonback}}
        </div>
    </div>
</template>

<template name="addvideoformp2pipfs">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video with IPFS</h1>
            <p>
                <a href="https://ipfs.io" target="_blank"><strong>IPFS</strong></a> is a modern peer-to-peer protocol focused on the web. On IPFS, your files are identified by a hash, a digital fingerprint. After downloading a file from IPFS, you can be verify the file hasn't been changed since the original upload, making your content trustable.
                <br /><br /><a href="https://ipfs.github.io/public-gateway-checker/" target="_blank"><strong>IPFS Gateways</strong></a> around the world gives multiple access points to a file, making it really hard (if not impossible) to block access to the content.
                <br /><br />You can use <a href="https://github.com/ipfs-shipyard/ipfs-desktop" target="_blank"><strong>IPFS Desktop</strong></a> app to easily use IPFS with a graphical user interface on your desktop PC. If you want to store large amount of videos (>1TB), on a server with large bandwidth, you should use <a href="https://github.com/ipfs/go-ipfs" target="_blank"><strong>go-ipfs</strong></a>
            </p>

            {{> addvideohashes}}

            {{> addvideobuttonfinish}}
            {{> addvideobuttonback}}
        </div>
    </div>
</template>

<template name="addvideoformp2psia">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video with Skynet</h1>
            <p>
                <a href="https://siasky.net/" target="_blank"><strong>Skynet</strong></a> is a next-gen decentralized protocol focused on putting the users in control of their content. Content is identified by a Skylink, which can be used to verify the file hasn't been changed since the original upload, making your content trustable.
                <br /><br />
                Anyone running a Skynet node can access any file on Skynet. There are multiple portals around the world which enable users to access content without downloading special software.
                <br /><br />
                You can use <a href="https://sia.tech/get-started" target="_blank"><strong>Sia-UI</strong></a> to easily upload content to Skynet from a desktop or laptop. Unlike other solutions, once you have uploaded a file your computer does not need to remain online for the file to be available continuously. The Sia network will seed the file for you.
                <br /><br />
                Skynet is a high speed network that has been optimized for large files such as video.
            </p>

            {{> addvideohashes "sia"}}

            {{> addvideobuttonfinish}}
            {{> addvideobuttonback}}
        </div>
    </div>
</template>

<template name="addvideoformp2ptorrent">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video with WebTorrent</h1>
            <p>
                <a href="https://webtorrent.io" target="_blank"><strong>WebTorrent</strong></a> is a torrent client that works in the browser. You can <a href="https://webtorrent.io/desktop/"><strong>download WebTorrent desktop</strong></a> and start seeding your video files very easily.
                <br /><br />This is a good way for to self-host your videos if you have a moderate amount of video data (less than 1TB).
                <br /><br />It's strongly recommended to combine WebTorrent with another video source as your home connection will most likely remain the only seeder, ever.
            </p>
            <div class="ui input" style='width: 100%'>
                <input id="remotelink" type="text" name="url" placeholder="{{translate 'UPLOAD_MAGNET_PLACEHOLDER'}}" value="">              
            </div>
            <br /><br />
            {{> addvideobuttonfinish}}
            {{> addvideobuttonback}}
        </div>
    </div>
</template>

<template name="addvideoformfile">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video from a file</h1>
            <p>
                DTube provides a free video upload service, that encodes your video, creates a sprite, and stores all these files on a decentralized network (BTFS). However, this service has serious limitations:
                <div style="font-size: 16px; font-weight: 450; margin-left: 15px; margin-bottom: 5px;">Maximum quality is 480p</div>
                <div style="font-size: 16px; font-weight: 450; margin-left: 15px; margin-bottom: 5px;">Videos longer than 20 minutes will not get re-encoded, only stored</div>
                <div style="font-size: 16px; font-weight: 450; margin-left: 15px;">Videos with low views and older than 6 months might get deleted</div>
                <br>
                These limitations may not apply to 3rd party upload endpoints not operated by DTube. Please check with the respective upload endpoint providers regarding the limitations associated with the use of such upload endpoints.
                <br />
                <h2>Choose an upload server: </h2>
            </p>

            <center>
                <select id="uploadEndpointSelection" class="ui fluid selection dropdown">
                    <option value="">{{ translate 'UPLOAD_ENDPOINT_PLACEHOLDER' }}</option>
                    <option value="btfs.d.tube">{{ translate 'UPLOAD_ENDPOINT_DEFAULT' }} (btfs.d.tube)</option>
                    {{#each endpoint in thirdPartyUploadEndpoints}}
                    <option value="{{endpoint}}">{{endpoint}}</option>
                    {{/each}}
                </select><br>
                <div id="dropzone" class="dropzone needsclick">
                    <div class="needsclick">
                    <i class="video icon"></i>
                    <h2>{{ translate 'UPLOAD_UPLOAD_FILE'}}</h2>
                    </div>
                </div>
                <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;">
            </center>
            <br />
            {{> addvideobuttonback}}
        </div>
    </div>
</template>

<template name="addvideoformfileuploading">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form" style="width:100%">
            <h1>DTube free upload</h1>
            <p>
                Your upload is in progress, please wait patiently.
            </p>

            <div class="ui indicating progress" id="progressvideo" style="display:none">
                <div class="bar"></div>
                <div class="label">{{ translate 'UPLOAD_UPLOADING_VIDEO'}}</div>
            </div>
            {{> addvideoprogress}}
        </div>
    </div>
</template>

<template name="addvideoformfileuploaded">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form" style="width:100%">
            <h1>DTube upload success</h1>
            <p>
                File uploading and processing is complete. Click on Finish to preview your video.
            </p>

            {{> addvideohashes}}
            {{> addvideobuttonfinish}}
        </div>
    </div>
</template>

